/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" @click="handleCheckedTreeExpand(true)">全部展开</el-button>
          <el-button size="small" type="primary" @click="handleCheckedTreeExpand(false)">全部折叠</el-button>
          <el-button size="small" type="primary" @click="addFrom()">添加</el-button>
        </div>
        <el-tree class="treeclass" ref="tree" :data="treeData" default-expand-all="" :props="defaultProps" @node-click="nodeclick"  check-strictly node-key="menuid"></el-tree>
      </el-col>
      <el-col :span="18">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId">
            <el-select size="small" v-model="form.parentId" placeholder="请选择" class="selectw">
              <el-option v-for="parm in fmenu" :key="parm.id" :label="parm.name" :value="parm.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-input size="small" v-show="false" v-model="form.id"></el-input>
            <el-input size="small" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input size="small" v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input size="small" v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input size="small" v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" v-show="showmod" @click="modMenu('form', form.id)">编辑保存</el-button>
            <el-button size="small" type="primary" v-show="showadd" @click="addMenu('form', form.id)">新增保存</el-button>
            <el-button size="small" type="primary" v-show="showdelete" @click="deleteModule(form.id)">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  menu,
  ModuleList,
  modMenu,
  addMenu,
  ModuleDelete
} from '../../api/userMG'
export default {
  data() {
    return {
      showdelete: false,
      showadd: false,
      showmod: false,
      treeData: [],
      defaultProps: {
        children: 'menus',
        label: 'menuname'
      },
      form: {
        sort: 0,
        url: '',
        icon: '',
        name: '',
        menuname: '',
        menuid: '',
        id: '',
        parentId: ''
      },
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ]
      },
      fmenu: []
    }
  },
  /**
   * 创建完毕
   */

  created() {
    this.getdata()
    this.getmenuByPid(0)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {
      menu()
      .then(res => {
        if (res.success) {
          const flagTree = [{
            "menuid": 0,
            "id": 0,
            "parentId": 0,
            "menuname": '根节点',
            "menus": []
          }]
          flagTree[0].menus = res.data
          this.treeData = flagTree
        } else {
          this.$message.error(res.msg)
          return false
        }
      })
      .catch(err => {
        this.$message.error('菜单加载失败，请稍后再试！')
      })
    },
    // 展开/折叠
    handleCheckedTreeExpand(value) {
      let treeList = this.treeData;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.tree.store.nodesMap[treeList[i].menuid].expanded = value;
      }
    },
    // 获取父级菜单
    getmenuByPid(pid) {
      let parm = {
        pid: pid
      }
      ModuleList(parm)
        .then(res => {
          this.fmenu = res.data
        })
        .catch(err => {
          this.loading = false
          this.$message.error('父级菜单列表获取失败，请稍后再试！')
        })
    },
    // 点击节点
    nodeclick(arr, node, self) {
      this.getmenuByPid(arr.parentId)
      if (arr.id == 0) {
        this.form.id = 0
        this.form.parentId = 0
        return;
      }
      this.form = arr
      this.showdelete = true
      this.showmod = true
      this.showadd = false
      
    },
    addFrom() {
      this.form.icon = ''
      this.form.name = ''
      this.form.url = ''
      this.form.sort = ''
      this.showdelete = false
      this.showmod = false
      this.showadd = true
    },
    // 编辑菜单
    modMenu(editData,id) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          let formFlag = {
            sort: this.form.sort,
            url: this.form.url,
            icon: this.form.icon,
            name: this.form.name,
            id: this.form.id,
            parentId: this.form.parentId
          }
          modMenu(formFlag)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.getdata()
                this.getmenuByPid(formFlag.parentId)
                this.form = {}
              } else {
                this.$message.error(res.msg)
                return false
              }
            })
            .catch(err => {
              this.$message.error('菜单管理列表编辑失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除菜单
    deleteModule(id) {
      let delFlag = {
        id: id
      }
      ModuleDelete(delFlag)
        .then(res => {
          if (res.success) {
              this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getdata()
            this.getmenuByPid(0)
            this.form = {}
          } else {
            this.$message.error(res.msg)
            return false
          }
        })
        .catch(err => {
          this.$message.error('菜单管理列表删除失败，请稍后再试！')
        })
    },
    // 新增菜单
    addMenu(editData,id) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          let formFlag = {
            sort: this.form.sort,
            url: this.form.url,
            icon: this.form.icon,
            name: this.form.name,
            parentId: id
          }
          addMenu(formFlag)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.getdata()
                this.getmenuByPid(0)
                this.form = {}
              } else {
                this.$message.error(res.msg)
                return false
              }
            })
            .catch(err => {
              this.$message.error('菜单管理列表保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>
 
 